<template>
  <center>
    <div id="main" style="width: 1000px; height: 700px"></div>
  </center>
</template>

	<script >
import * as echarts from "echarts";
import "echarts-wordcloud";

export default {
  data() {
    return {
      data1: [
        { name: "Java", value: 200 },
        { name: "Python", value: 200 },
        { name: "HTML", value: 150 },
        { name: "JavaSript", value: 150 },
        { name: "Java Web", value: 180 },
        { name: "MySQL", value: 160 },
        { name: "CentOS", value: 170 },
        { name: "Android", value: 100 },
        { name: "Hadoop", value: 210 },
        { name: "HDFS", value: 190 },
        { name: "YARN", value: 190 },
        { name: "MapReduce", value: 190 },
        { name: "Flume", value: 180 },
        { name: "Sqoop", value: 170 },
        { name: "Hive", value: 180 },
        { name: "Azkaban", value: 175 },
        { name: "Zookpeer", value: 155 },
        { name: "爬虫", value: 210 },
        { name: "Spark", value: 195 },
        { name: "大数据", value: 500 },
        { name: "Hbase", value: 229 },
        { name: "其他", value: 60 },
        { name: "Ajax", value: 320 },
        { name: "IDE", value: 167 },
        { name: "echarts", value: 99 },
        { name: "wordCloud", value: 111 },
        { name: "数据采集", value: 68 },
        { name: "数据分析", value: 123 },
        { name: "数据清洗", value: 135 },
        { name: "数据存储", value: 135 },
        { name: "数据可视化", value: 165 },
        { name: "apache", value: 215 },
        { name: "Scalar", value: 220 },
        { name: "人工智能", value: 320 },
      ],
    };
  },
  mounted() {
    var Mychart = echarts.init(document.getElementById("main"));

    var option = {
      title: {
        text: "词云",
        textStyle: {
          color: "#ffffff",
        },
      },
      backgroundColor: "#000",
      series: [
        {
          type: "wordCloud",

          //网格尺寸,尺寸越大，字体之间的间隔越大
          grideSize: 2,

          //字体的最大与最小字号
          sizeRange: [12, 35],

          //字体旋转的范围
          rotationRange: [45, 90, 135, -90],

          //词云形状 circle:圆形,pentagon:五边形
          //cardioid:苹果形或心形,star:星形,diamond:钻石,
          //triangle-forward:三角形,triangle:三角形,smooth:平滑
          shape: "pentagon",
          textStyle: {
            normal: {
              //字体随机颜色
              color: function () {
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 255),
                    Math.round(Math.random() * 255),
                    Math.round(Math.random() * 255),
                  ].join(",") +
                  ")"
                );
              },
            },
            emphasis: {
              //阴影距离
              shadowBlur: 1,

              //阴影颜色
              shadowColor: "#111",
            },
          },
          data: this.data1,
        },
      ],
    };
    Mychart.setOption(option);
  },
};
</script>